<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3新特性</title>
    <style type="text/css">
       div{
           width: 100px;
           height: 100px;
           margin: 5px;

       }
       /*创建圆角边框*/
        #div1{
            border: 2px solid #278BF4;
            padding: 20px 35px;
            background-color: yellow;
            border-radius: 25px;
        }
       /*CSS3 中的 box-shadow 属性被用来添加阴影*/
        #div2{
            border: 2px solid red;
            background-color: purple;
            box-shadow: 10px 10px #888888;
        }
       /*你可以使用border-image图像创建一个边框*/
        #div3{
            border: 10px solid transparent;
            padding: 15px;
            -webkit-border-image: url(../imgs/sanjiaoxing.jpg) 30 round; /* Safari 3.1-5 */
            -o-border-image: url(../imgs/sanjiaoxing.jpg) 30 round; /* Opera 11-12.1 */
            border-image: url(../imgs/sanjiaoxing.jpg) 30 round;
        }
       /*使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"*/
        #div4{
            padding: 2px;
            border-radius: 25px;
            background-color: #278BF4;
        }
       #div5{
           padding: 2px;
           border-radius: 30px;
           background-color: #278BF4;}
       /*通过background来使用将固定图片作为背景，并进行圆角化处理*/
        #div6{
            padding: 5px;
            border-radius: 25px;
            background:url("../imgs/sanjiaoxing.jpg");
            -webkit-background-position: left top;

        }



    </style>
</head>
<body>
<div id="div1">
    div1:border-radius 属性允许您为元素添加圆角边框！
</div>
<div id="div2">
    div2:box-shadow 属性被用来添加阴影
</div>
<div id="div3">
    div3:使用border-image图像创建一个边框
</div>
<div id="div4">
    <br>
    制作圆角
</div>
<div id="div5">
    <br>
    制作圆角
</div>
<div id="div6">
    <br>
    制作圆角
</div>
</body>
</html>